<template>
  <div style="display: inline-block;margin-left: 12px">
    <el-button type="primary" size="small" @click="seeUser">查看用户</el-button>
      <el-drawer
          title="角色用户"
          size="600px"
          :destroy-on-close="false"
          :visible.sync="dialogVisible">
        <div class="table">
          <el-table
              :data="tableData"
              border
              style="width: 100%">
            <el-table-column
                prop="username"
                label="账号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户名">
            </el-table-column>
            <el-table-column
                prop="registerTime"
                label="注册时间">
            </el-table-column>
          </el-table>
          <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @pageChange="pageChange" @handleSizeChange="handleSizeChange"></pagination>

        </div>

      </el-drawer>

  </div>
</template>

<script>
// getUserByCriteria
import dict from "@/util/dict";
import pagination from "@/components/pagination";
export default {
  name: "showRoleUserBtn",
  components:{
    pagination
  },
  props:{
    params:{
      default:()=>{}
    }
  },
  data(){
    return {
      tableData:[],
      dialogVisible:false,
      pageInfo:{...dict.pageInfo}
    }
  },
  methods:{
    pageChange(page){
      this.pageInfo.page = page
      this.getUserByCriteria()
    },
    handleSizeChange(size){
      this.pageInfo.pageSize=size
      this.pageInfo.page = 1
      this.getUserByCriteria()
    },
    getUserByCriteria(){
      let params = {
        roleId:this.params.id,
        "page":this.pageInfo.page-1,
        "pageSize": this.pageInfo.pageSize,
      }
      this.$api.getUserByCriteria(params).then(res=>{
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
      })
    },
    seeUser(){
      this.dialogVisible = true
      this.getUserByCriteria()
    },
  },
}
</script>

<style scoped>
.table{
  padding: 0 20px;
}
</style>